<#assign pageTitle="我的信息"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/user.css?20220210"/>
    <style>iframe{border:none}</style>
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="我的信息"
            left-text="返回"
            left-arrow
            @click-left="location.href='/user/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <van-form @submit="onSubmit">
        <van-field
                v-model="userId"
                name="用户Id"
                label="用户Id"
                readonly
        ></van-field>
        <van-field
                v-model="mobile"
                name="手机号"
                label="手机号"
                placeholder="请绑定手机号"
                readonly
        >
                <template #button>
                    <van-tag v-if="mobile == ''" size="medium" type="warning" @click="popupShow()" style="padding: 4px 6px"> 绑定手机 </van-tag>
                </template>
        </van-field>
        <van-field
                v-model="realName"
                name="真实姓名"
                label="真实姓名"
                placeholder="请输入真实姓名"
        ></van-field>
        <van-field
                v-model="userName"
                name="昵称"
                label="昵称"
                placeholder="请输入昵称"
        ></van-field>
        <van-field name="radio" label="性别">
            <template #input>
                <van-radio-group v-model="sex" direction="horizontal">
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field
                v-model="email"
                name="邮箱"
                label="邮箱"
                placeholder="请输入邮箱"
        ></van-field>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">更新资料</van-button>
        </div>
    </van-form>
    <van-popup
            v-model="bindingPopup"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '500px' }"
    >
        <iframe src="/user/binding/mobile.html" width="100%" height="100%"></iframe>
    </van-popup>
</#assign>
<#assign pageScript>
    <script>
        var userId = ${user.userId}
        var mobile = '${user.mobile!}'
        var userName = '${user.userName!}'
        var realName = '${user.realName!}'
        var sex = '${user.sex}'
        var email = '${user.email!}'
        new Vue({
            el: '#app',
            data() {
                return {
                    bindingPopup: false,
                    showFooter: false,
                    userId: userId,
                    mobile: mobile,
                    realName: realName,
                    userName: userName,
                    email:email,
                    sex: sex
                };
            },
            methods: {
                onSubmit(values) {
                    var that = this;
                    var data = new FormData();
                    data.append("realName", that.realName)
                    data.append("userName", that.userName)
                    data.append("email", that.email)
                    data.append("sex", that.sex)
                    axios.post('/user/updateUser.json',data).then(function (json) {
                        if (json.data.code === 0) {
                            that.$dialog.alert({
                                title:"恭喜你，更新资料成功！"
                            });
                        } else {
                            that.$dialog.alert({
                                title:json.data.msg
                            });
                        }
                    });
                },
                popupShow(){
                    this.bindingPopup = true;
                }
            },

        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />